<template>
  <div class="login-container">
    <a-row>
      <a-col :push="15" :span="6">
        <div class="login-container-form">
          <div class="login-container-hello">您好!</div>
          <div class="login-container-title">欢迎登录碳惠安徽管理系统</div>
          <a-form
            layout="horizontal"
            :model="state.formInline"
            :rules="rules"
            @finish="handleSubmit"
          >
            <a-form-item name="account">
              <a-input
                size="large"
                v-model:value="state.formInline.account"
                placeholder="请输入账号"
              >
                <template #prefix>
                  <user-outlined type="user" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item name="password">
              <a-input-password
                size="large"
                v-model:value="state.formInline.password"
                placeholder="请输入密码"
              >
                <template #prefix><lock-outlined type="user" /></template>
              </a-input-password>
            </a-form-item>
            <a-form-item>
              <a-button
                class="login-btn"
                type="primary"
                size="large"
                html-type="submit"
                :loading="state.loading"
                block
              >
                登录
              </a-button>
            </a-form-item>
          </a-form>
        </div>
      </a-col>
    </a-row>
    <div class="login-container-tips">
      Copyright 2018 - 2023 安徽口袋网信息科技有限公司 版权所有
      <a href="https://beian.miit.gov.cn/" target="_blank">皖ICP备18026715号</a>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { message } from 'ant-design-vue'
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
import { login_signIn } from '@/api/login'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/store/modules/user'

const state = reactive({
  loading: false,
  formInline: {
    account: '', //18055134563
    password: '' //123456
  }
})

const rules = {
  account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}

const route = useRoute()

const router = useRouter()

const userStore = useUserStore()

const handleSubmit = async () => {
  state.loading = true
  let { data } = await login_signIn(state.formInline).finally(() => {
    state.loading = false
  })
  userStore.setUserInfo(data.userDetail)
  message.success('登录成功！')
  router.replace((route.query.redirect as string) ?? '/')
}
</script>

<style lang="scss" scoped>
.login-container {
  width: 100%;
  height: 100%;
  background: url('@/assets/imgs/login_bg.png') no-repeat top;
  background-size: cover;
  overflow: hidden;
  &-form {
    width: calc(100% - 40px);
    height: 400px;
    padding: 4vh;
    margin: calc((100vh - 440px) / 2) 20px 0 20px;
    background: url('@/assets/imgs/login_form_bg.png') no-repeat top;
    background-size: 100% 100%;
    border-radius: 10px;
    box-shadow: 0 2px 8px 0 rgb(7 17 27 / 6%);
    .anticon {
      color: rgba(0, 0, 0, 0.25);
    }
    .verify-btn {
      position: absolute;
      right: -1px;
      top: -1px;
      width: 100px;
      height: auto;
      padding-top: 8px;
      padding-bottom: 8px;
    }
  }
  &-hello {
    font-size: 32px;
    color: #fff;
  }
  &-title {
    margin-bottom: 30px;
    font-size: 20px;
    color: #fff;
  }
  &-tips {
    position: fixed;
    bottom: 10px;
    width: 100%;
    height: 40px;
    color: rgba(255, 255, 255, 0.856);
    text-align: center;
  }
  .login-btn {
    width: 100%;
    height: 45px;
    border-radius: 99px;
  }
}
</style>
